<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <link href="/static/css/chatAI.css" rel="stylesheet">
    <title>AI Chatbot</title>
    <script>
        function sendMessage() {
            const message = document.getElementById("message").value;
            fetch(`/wenxinyiyan/chat?content=${encodeURIComponent(message)}`)
                .then(response => response.json())
                .then(data => {
                    // 获取聊天容器元素
                    const chatContainer = document.getElementById("chatContainer");

                    // 创建用户消息的div元素
                    const userMessageDiv = document.createElement("div");
                    userMessageDiv.classList.add("user-message-container"); // 添加一个新的样式类

                    // 创建图片元素
                    const userMessageImage = document.createElement("img");
                    userMessageImage.src = "/static/image/user.png"; // 替换为您想要显示的图片路径
                    // 创建用户消息的span元素
                    const userMessageSpan = document.createElement("span");
                    userMessageSpan.textContent = `${message}`;
                    userMessageSpan.classList.add("user-message"); // 可选的样式类
                    userMessageDiv.appendChild(userMessageImage);
                    userMessageDiv.appendChild(userMessageSpan);

                    // 将用户消息添加到聊天容器
                    chatContainer.appendChild(userMessageDiv);


                    // 创建AI消息的div元素
                    const aiMessageDiv = document.createElement("div");
                    aiMessageDiv.classList.add("ai-message-container"); // 添加一个新的样式类

                    // 创建图片元素
                    const aiMessageImage = document.createElement("img");
                    aiMessageImage.src = "/static/image/robot.png"; // 替换为您想要显示的图片路径
                    // 判断用户输入是否包含"请为我画"
                    if (message.includes("请为我画")) {
                        // 创建一个img元素
                        const imageElement = document.createElement("img");
                        imageElement.src = data.response;
                        imageElement.classList.add("ai-image");
                         imageElement.style.maxWidth = "1000px";
                       imageElement.style.maxHeight = "1000px";
                          // 将图片和span元素添加到div元素中
                        aiMessageDiv.appendChild(aiMessageImage);
                        aiMessageDiv.appendChild(imageElement);
                        // 将AI消息添加到聊天容器
                        chatContainer.appendChild(aiMessageDiv);
                    } else {

                        // 创建span元素
                        const aiMessageSpan = document.createElement("span");
                        aiMessageSpan.textContent = `${data.response}`;
                        aiMessageSpan.classList.add("ai-message");// 可选的样式类

                        // 将图片和span元素添加到div元素中
                        aiMessageDiv.appendChild(aiMessageImage);
                        aiMessageDiv.appendChild(aiMessageSpan);
                        // 将AI消息添加到聊天容器
                        chatContainer.appendChild(aiMessageDiv);
                    }

                    // 创建一个换行元素并添加到聊天容器
                    const breakElement = document.createElement("br");
                    chatContainer.appendChild(breakElement);



                    // 添加额外的换行以保持对话的可读性
                    chatContainer.appendChild(document.createElement("br"));
                    chatContainer.appendChild(document.createElement("br"));

                    // 滚动到聊天容器的底部以便显示最新消息
                    chatContainer.scrollTop = chatContainer.scrollHeight;

                    console.log(data);
                    //清空聊天内容
                    document.getElementById("message").value = "";
                });
        }

 function startSSE() {
    const eventSource = new EventSource("/wenxinyiyan/events");
    console.log(eventSource)
    eventSource.onmessage = function (event) {
        const chatBox = document.getElementById("chatBox");
        if (chatBox) { // 检查 chatBox 元素是否存在
            const aiMessage = event.data;
            chatBox.value += `AI: ${aiMessage}\n\n`;
            console.log(`AI: ${aiMessage}`);
            typeWriter(aiMessage, chatBox);
        } else {
            console.error("chatBox element not found");
        }
    };
}

function typeWriter(text, element) {
    if (element) { // 检查 element 参数是否存在
        let i = 0;
        const speed = 50;
        function type() {
            if (i < text.length) {
                element.value += text.charAt(i);
                i++;
                setTimeout(type, speed);
            }
        }
        type();
    } else {
        console.error("Element not found");
    }
}

        window.onload = startSSE;
    </script>
    <script src="/static/layui/layui.js"></script>
</head>
<body style="background-color: #4f5c70">
    <div class="row1">
        <ul class="layui-nav layui-nav-tree layui-bg-cyan">
            <li class="layui-nav-item layui-nav-itemed">
                <a  href="javascript:" style="font-size: 22px">AI Chatbot</a>
                <dl class="layui-nav-child">
                    <dd><a href="/static/index.html" style="font-size: 22px">在线聊天</a></dd>
                    <dd><a href="/static/history.html" style="font-size: 22px">历史对话</a></dd>
                </dl>
            </li>
        </ul>
        <div class="column1">
            <div id="chatContainer"> </div>
            <div id="chatBox"> </div>
            <textarea class=" input" type="text" id="message" placeholder="  请输入聊天内容"></textarea>
            <div class="btnDiv">
                <h1 style="color: #fff;font-size: 40px;">AI Chatbot</h1>
                <button type="button" class=" button btnInput" onclick="sendMessage()">Send</button>
            </div>
        </div>
    </div>
</body>
</html>